<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录显示与隐藏1</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        .box{
            width:350px;
            height:250px;
            position: absolute;
            background: #99ff00;
            display: none;
        }
        .box span{
            position: absolute;
            right: 0;
            top:0;
            cursor: pointer;
            color: #fff;
        }
    </style>
</head>
<body>
<input type="button" value="登录">
<div class="box">
    <span>关闭</span>
</div>
</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        //让box在可视窗口中进行自适应
        $(window).resize(function () {
            Auto();
        });
        //用函数function进行封装
        function Auto() {
            //获取body的宽度
            var screenWidth = $(document.body).outerWidth();
            //获取body的高度
            var screenHeight = $(document.body).outerHeight();
            //获取盒子的宽度
            var boxWidth = $(".box").outerWidth();
            //获取盒子的高度
            var boxHeight = $(".box").outerHeight();
            //设置盒子水平居中以及垂直居中
            $(".box").css({
                left: (screenWidth-boxWidth) / 2,
                top:  (screenHeight-boxHeight) /2
            })
        }
        //调用Auto函数
        Auto();

        //添加点击事件
        $("input").click(function () {
            $(".box").show();
        });
        $("span").click(function () {
            $(".box").hide();
        })
    })
</script>